<template>
  <div class="goods" :style="goodstyle">
    <ul :class="calssName">
      <li v-for="(item, i) in data.list.length > 0 ? data.list : list" v-if="i < data.limit" class="good-box" :style="data.list_type == 'list' ? itemstyle : ''">
        <div class="good-box-item" :style="itemstyle">
          <div class="img-box">
            <div class="good-img-box" :style="imgstyle" v-if="data.show_type == 'block' && (data.list_type == 'two' || data.list_type == 'three')">
              <vimage v-if="item.master" mode="widthFix" lazy-load="" :src="item.master" alt="" class="good-img" draggable="false"></vimage>
              <img v-else src="@/assets/images/goods_col2.png" alt="" class="good-img" draggable="false" />
            </div>
            <div class="good-img-box" v-else>
              <vimage v-if="item.master" mode="widthFix" lazy-load="" :src="item.master" alt="" class="good-img" draggable="false"></vimage>
              <img v-else src="@/assets/images/goods_col2.png" alt="" class="good-img" draggable="false" />
            </div>
            <p class="title" v-if="data.list_type != 'list'" :style="'color:' + data.t_color">{{ item.name }}</p>
          </div>
          <div v-if="data.list_type != 'list'" class="box-bottom">
            <div class="price">
              <span v-if="data.pro_price.show" class="pro-price" :style="'color:' + data.pro_price.color">
                <template v-if="item.type == '2'">
                  <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>
                  积分
                </template>
                <template v-else>
                  ￥
                  <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>
                </template>
              </span>
              <span v-if="data.del_price.show" class="del-price" :style="'color:' + data.del_price.color">
                <i class="del-icon">{{ data.del_price.title ? data.del_price.title + ':' : '' }}</i>
                <i class="del-num">￥{{ item.original_price }}</i>
              </span>
            </div>
            <div class="btn">
              <span v-show="data.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
                <i :style="'font-size:20px;color:' + data.add_button.color + ';'" :class="data.add_button.icon + ' iconfont'"></i>
              </span>
              <span v-if="data.sales_num.show" class="sales-num" :style="'color:' + data.sales_num.color">{{ data.sales_num.title || '销量' }}:{{ item.sell }}</span>
            </div>
          </div>
          <div v-if="data.list_type == 'list'" class="right van-hairline--bottom">
            <div>
              <p class="title" :style="'color:' + data.t_color">{{ item.name }}</p>
              <p class="subtitle">{{ item.subtitle }}</p>
            </div>
            <div class="right-bottom">
              <div class="price">
                <span v-if="data.pro_price.show" class="pro-price" :style="'color:' + data.pro_price.color">
                  <template v-if="item.type == '2'">
                    <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>
                    积分
                  </template>
                  <template v-else>
                    ￥
                    <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>
                  </template>
                </span>
                <span v-if="data.del_price.show" class="del-price" :style="'color:' + data.del_price.color">
                  <i class="del-icon">{{ data.del_price.title ? data.del_price.title + ':' : '' }}</i>
                  <i class="del-num">￥{{ item.original_price }}</i>
                </span>
              </div>
              <div class="btn">
                <span v-show="data.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1">
                  <i :style="'font-size:20px;color:' + data.add_button.color + ';'" :class="data.add_button.icon + ' iconfont'"></i>
                </span>

                <!--                <span class="buybtn-icon buybtn iconfont-m- icon-m-buy1" style="color: rgb(255, 60, 41);"></span>
 -->
                <span v-if="data.sales_num.show" class="sales-num" :style="'color:' + data.sales_num.color">{{ data.sales_num.title || '销量' }}:{{ item.sell }}</span>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      list: [
        {
          id: 5,
          type: 1,
          name: '这是一个商品名称',
          subtitle: '这是一个商品副名称',
          master: '',
          sell_price: '244.00',
          original_price: '500.00',
          sell: 0
        },
        {
          id: 15,
          type: 1,
          name: '这是一个商品名称',
          subtitle: '这是一个商品副名称',
          master: '',
          sell_price: '255.00',
          original_price: '500.00',
          sell: 0
        }
      ]
    };
  },
  computed: {
    calssName() {
      // let class=''
      return 'goods-list ' + this.data.show_type + ' ' + this.data.list_type;
    },
    itemstyle() {
      return 'background:' + this.data.bg + ';border-radius:' + this.data.r_t / 2 + 'px ' + this.data.r_t / 2 + 'px ' + this.data.r_b / 2 + 'px ' + this.data.r_b / 2 + 'px ';
    },
    imgstyle() {
      let h = 0;
      let w = 0;
      if (this.data.list_type == 'two') {
        w = 375 / 2 - 4 - this.data.p_lr / 2;
      } else {
        w = (375 - 16 - this.data.p_lr) / 3;
      }
      return 'height:' + w + 'px';
    },
    goodstyle() {
      return 'padding: ' + this.data.p_t / 2 + 'px ' + this.data.p_lr / 2 + 'px ' + this.data.p_b / 2 + 'px';
    }
  }
};
</script>

<style scoped lang="scss">
.goods {
  width: 100%;
  overflow: auto;
  padding: 8px 12px 0;

  i {
    font-style: normal;
  }

  .goods-list {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    min-width: 100%;
    box-sizing: border-box;
    padding-left: 0;

    .good-box {
      flex-shrink: 0;
      overflow: hidden;

      .good-box-item {
        overflow: hidden;
      }

      .img-box {
        overflow: hidden;
        position: relative;

        .good-img-box {
          position: relative;
          overflow: hidden;

          .good-img {
            width: 100%;
            display: block;
          }
        }
      }

      .title {
        width: 100%;
        box-sizing: border-box;
        color: #212121;
        font-family: PingFang SC;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 20px;
        max-height: 40px;
        padding: 0 8px;
        margin: 8px 0 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .box-bottom {
        width: 100%;
        display: flex;
        box-sizing: border-box;
      }

      .btn {
        display: flex;
        flex-direction: column;
        margin: 0;

        .buybtn {
          font-size: 24px;
          height: 24px;
          line-height: 24px;
          text-align: right;
        }

        .sales-num {
          height: 14px;
          font-size: 10px;
          line-height: 14px;
          color: #969696;
          text-align: right;
        }
      }
      .price {
        display: flex;
        flex-direction: column;

        .pro-price {
          height: 24px;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 17px;

          i {
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            text-overflow: ellipsis;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            font-style: normal;
            font-weight: bold;
            margin-right: 3px;
          }
        }

        .del-price {
          display: flex;
          align-items: center;
          height: 14px;
          line-height: 14px;

          .del-icon {
            display: inline-block;
            font-size: 10px;
            height: 14px;
            line-height: 14px;
          }

          .del-num {
            display: inline-block;
            font-size: 10px;
            height: 14px;
            line-height: 14px;
            text-decoration: line-through;
          }
        }
      }
    }

    &.scroll {
      flex-direction: row !important;
      flex-wrap: nowrap;

      .good-box {
        padding-left: 8px;

        .good-box-item {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .good-img-box {
            height: 156px;
            overflow: hidden;

            .good-img {
              min-height: 100%;
            }
          }
        }

        .box-bottom {
          padding: 0 8px 8px;
          justify-content: space-between;
        }
      }

      &.one {
        flex-direction: column;

        .good-box {
          width: 296px;

          .good-img-box {
            overflow: hidden;
            width: 100%;
            height: 138px;
          }
        }
      }

      &.two {
        .good-box-item {
          width: 156px;
        }
      }

      &.three {
        .del-price,
        .sales-num {
          display: none !important;
        }

        .good-box-item {
          width: 102px;

          .good-img-box {
            width: 100%;
            height: 102px;
            margin-bottom: 8px;
          }
        }
      }
    }

    &.block {
      &.one .good-box {
        width: 100%;

        .good-box-item {
          padding-bottom: 8px;

          .good-img-box {
            height: 161px;
          }
        }
      }

      &.one .good-box:nth-child(n + 2) {
        margin-top: 8px;
      }

      &.two .good-box {
        width: 50%;

        .good-box-item {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .good-img-box {
            height: 172px;
          }
        }
      }

      &.two .good-box:nth-child(odd) {
        padding-right: 4px;
      }
      &.two .good-box:nth-child(even) {
        padding-left: 4px;
      }
      &.two .good-box:nth-child(n + 3) {
        margin: 8px 0 0;
      }

      &.three {
        .good-box {
          width: 33.33%;

          .del-price,
          .sales-num {
            display: none;
          }

          .good-img-box {
            height: 112px;
            margin-bottom: 8px;
          }
        }

        .good-box:nth-child(n + 4) {
          margin: 8px 0 0;
        }

        .good-box:nth-child(3n-1),
        .good-box:nth-child(3n) {
          padding-left: 4px;
        }

        .good-box:nth-child(3n-2),
        .good-box:nth-child(3n-1) {
          padding-right: 4px;
        }
      }

      .box-bottom {
        padding: 0 8px 8px;
        justify-content: space-between;
      }
    }

    &.list .good-box {
      border-radius: 0;
      width: 100%;
      margin: 0 auto;
      flex-direction: row;
      padding: 8px 12px 0;
      margin-bottom: 10px;
      .right {
        height: 140px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 8px;
        box-sizing: content-box;
        overflow: hidden;
        .title {
          margin-top: 0;
          padding: 0;
        }
        .subtitle {
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 12px;
          line-height: 17px;
          color: #969696;
          padding: 0;
          margin-bottom: 11px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          box-sizing: border-box;
        }
        .right-bottom {
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          margin-bottom: 0;
          .price {
            display: flex;
            flex-direction: column;
            .pro-price {
              height: 24px;
            }
          }
        }
      }

      .good-box-item {
        display: flex;
      }

      .img-box {
        width: 140.47231px;
        height: 140.47231px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-right: 8px;

        .good-img-box {
          height: 100%;
          display: block;

          .good-img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
